<template>
    <div class="books">
        <p class="p1">文章管理</p>

        <!-- 砍价管理主体 -->
        <div class="books_in">
            <p class="p2">
                <span class="s1">
                    文章分类：
                    <el-select size="small" @change="selsFun" v-model="value" placeholder="请选择">
                        <el-option
                        v-for="(v,i) in options"
                        :key="i"
                        :label="v.title"
                        :value="v.id">
                        </el-option>
                    </el-select>
                </span>
                <span class="s2">
                    <span>文章搜索：</span>
                    <el-input size="small" class="inps" v-model="input" placeholder="请输入文章名称"></el-input>
                    <el-button size="small" type="primary" @click="inputFun" icon="el-icon-search"></el-button>
                </span>
            </p>

            <p class="p3">
                <el-button @click="addbookFun" size="small" type="primary" icon="el-icon-plus">添加文章</el-button>
            </p>

            <!-- 砍价商品表格 -->
            <el-table
                v-loading="loading"
                size='mini'
                :data="tableData"
                :default-sort = "{prop: 'add_time', order: 'descending'}"
                style="width: 100%">
                <el-table-column
                fixed
                prop="id"
                label="ID"
                width="120">
                </el-table-column>
                <el-table-column
                label="文章图片"
                width="120">
                    <template slot-scope="scope">
                        <img :src="scope.row.image_input[0]" style="width:40px;height:44px;" alt="">
                    </template>
                </el-table-column>
                <el-table-column
                label="文章名称"
                width="160">
                    <template slot-scope="scope">
                        <span>{{ scope.row | booktitle }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                prop="store_name"
                label="关联商品"
                width="120">
                </el-table-column>
                <el-table-column
                prop="visit"
                label="浏览量"
                width="100">
                </el-table-column>
                <el-table-column
                sortable
                prop="add_time"
                label="时间"
                width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.add_time | booktime }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                fixed="right"
                label="操作"
                width="166">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleClick(scope.row)" size="small">编辑</el-button>
                    <el-button type="text" @click="scope.row.store_name ? unrelevance(scope.row.id) : relevance(scope.row.id) " size="small">{{ scope.row.store_name ? '取消关联' : '关联' }}</el-button>
                    <el-button type="text" size="small" @click='delshop(scope.row)'>删除</el-button>
                </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @current-change="handleCurrentChange"
                @prev-click="prevFun"
                @next-click='nextFun'
                :current-page="page"
                :page-size="limit"
                layout="total, prev, pager, next, jumper"
                :total="total">
            </el-pagination>

            <!-- 关联表格 -->
            <tableform :tables='tables' :ids='ids' @disVal='disVal'></tableform>
        </div>
    </div>
</template>

<script>
import {writersel,writerlist,writerdel,writerun} from '../../api/content/books'
import moment from 'moment'
import tableform from '../../components/write/formtable'
import qs from 'qs'
export default {
    components:{
        tableform
    },
    data () {
        return {
            options: [],
            value: '',
            input:'',
            tableData:[],
            page:1,
            limit:6,
            pid:0,
            total:0,
            ids:{
                id:''
            },
            loading:true,
            form:{
                title1:'添加',
                title:'',
                write:'',
                selects:'',
                text:'',
                img:'',
                nei:'',
                jie:'',
                banner:0,
                hot:0,
                id:0
            },
            tables:{
                dialogTableVisible:false
            }
        }
    },
    filters:{
        booktitle(val){
            let str = `[${val.catename}] ${val.title}`
            return str
        },
        booktime(val){
            let times = moment(val * 1000).format('YYYY-MM-DD hh:mm')
            return times
        }
    },
    methods:{
        disVal(val){
            this.tables.dialogTableVisible = val
            this.loading = true;
            this.joint();
        },
        //关联
        relevance(val){
            let obj = {
                id:''
            }
            obj.id = val
            this.ids = {...obj}
            this.tables.dialogTableVisible = true;
        },
        //取消关联
        unrelevance(val){

            this.$confirm('确定取消关联吗?取消后无法恢复，请谨慎操作！', '取消关联', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                writerun(val).then(res => {
                    //console.log(res.data);
                    if (res.data.status === 200) {
                        this.$message.success('取消关联成功');
                        this.loading = true;
                        this.joint();
                    }else{
                        this.$message.error('取消关联失败')
                    }
                },err => {
                    console.log(err);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });

            
        },
        //文章删除
        delshop(val){
            console.log(val);
            this.$confirm('确定要删除文章吗？, 删除文章后将无法恢复，请谨慎操作！', '删除文章', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                
                writerdel(val.id).then(res => {
                    if (res.data.status === 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.loading = true;
                        this.joint();
                    }
                },err => {
                    this.$message.error('删除失败！')
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //文章名称查找
        inputFun(){
            this.loading = true;
            this.joint();
        },
        //下拉查找
        selsFun(){
            this.loading = true;
            this.pid = this.value;
            this.joint();
        },
        addbookFun(){
            this.$router.push('/addbooks?'+qs.stringify(this.form))
            //this.$router.push({name:'addbooks',params:{form:this.form}})
        },
        handleClick(row) {
            //console.log(row);
            this.form.title1 = '编辑'
            this.form.title = row.title;
            this.form.write = row.author;
            this.form.selects = row.cid;
            this.form.text = row.synopsis;
            this.form.img = row.image_input[0];
            this.form.banner = row.is_banner;
            this.form.hot = row.is_hot;
            this.form.nei = row.content;
            this.form.jie = row.url;
            this.form.id = row.id

            this.$router.push('/addbooks?'+qs.stringify(this.form))
        },
        //下拉请求
        sels(){
            writersel().then(res => {
                //console.log(res.data);
                if (res.data.status == 200) {
                    this.options = res.data.data;
                    this.options.unshift({title:'全部',id:0})
                }
            },err => {
                console.log(err);
            })
        },
        //文章列表请求
        joint(){
            writerlist({pid:this.pid,title:this.input,page:this.page,limit:this.limit}).then(res => {
                console.log(res.data);
                if (res.data.status == 200) {
                    this.tableData = res.data.data.list
                    this.total = res.data.data.count;
                    this.loading = false
                }
            },err => {
                console.log(err);
            })
        },
        handleCurrentChange(val) {
        this.page = val
        this.joint();
        },
        prevFun(val) {
            this.page = val
            this.joint();
        },
        nextFun(val) {
            this.page = val
            this.joint();
        },
    },
    created(){
        this.sels();
        //this.joint();

        //console.log(this.$route.query);
        if (this.$route.query.pid !== undefined) {
            this.pid = this.$route.query.pid
            this.joint()
        }else{
            this.joint()
        }
    }
}
</script>

<style lang="scss">
    .books{
        width: 100%;
        height: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .p1{
            width: 100%;
            height: 60px;
            background: white;
            display: flex;
            align-items: center;
            padding: 0 10px;
            box-sizing: border-box;
            font-size: 18px;
        }
        .books_in{
            width: 100%;
            height: 500px;
            background: white;
            margin-top: 16px;
            .p2{
                width: 100%;
                height: 50px;
                display: flex;
                justify-content:start;
                align-items: center;
                padding: 36px 20px;
                box-sizing: border-box;
            }
            .p3{
                width: 100%;
                height: 40px;
                display: flex;
                align-items: center;
                padding: 0 20px;
                box-sizing: border-box;
            }
        }
    }

.books_in>.p2>span:nth-child(1){
    width: 36%;
    height: 100%;
    display: flex;
    align-items: center;
}
.books_in>.p2>span:nth-child(2){
    width: 36%;
    height: 100%;
    display: flex;
    align-items: center;
    .inps{
        width: 66%;
    }
    span{
        flex: 1;
        display: block;
        height: 100%;
        display: flex;
        white-space: nowrap;
        align-items: center;
    }
}
</style>